<div class="animated animated-delay-300" *ngIf="tableData" [ngClass]="animation">
  <table class="table table-hover table-striped table-sm">
    <thead *ngIf="table?.options?.showHeaders">
    <tr>
      <th *ngFor="let header of table?.options?.headers">
        <div class=" sort-group" *ngIf="header?.sort" (click)="sort(header.propName)">
          <span>{{ header.displayName }}</span>
          <div class="sort-btns" *ngIf="onSort !== header.propName && onSort !== '-' + header.propName">
            <span class="fa fa-caret-up font-75"></span>
            <span class="fa fa-caret-down font-75"></span>
          </div>
          <span *ngIf="onSort === header.propName" class="fa fa-fw fa-caret-up font-75"></span>
          <span *ngIf="onSort === '-' + header.propName" class="fa fa-fw fa-caret-down font-75"></span>
        </div>
        <div *ngIf="!header?.sort">
          <span>{{ header.displayName }}</span>
        </div>
      </th>
      <th *ngIf="table?.options.buttons && isShowControl">操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngIf="tableData?.page?.formattedResults?.length > 0">
      <tr *ngFor="let data of tableData?.page?.formattedResults; let rowIndex = index;"
          (click)="rowClicked($event, rowIndex)">
        <td *ngFor="let header of table?.options.headers">
          <ng-container *ngIf="!header.dynamicComponent?.component">
            <span>{{ getProperty(data, header.propName) }}</span>
          </ng-container>
          <ng-tools-dynamic-component *ngIf="header.dynamicComponent?.component"
                                      [component]="header.dynamicComponent.component"
                                      [context]="[data, rowIndex]"
                                      [events]="header.dynamicComponent.events"
                                      [data]="getProperty(data, header.propName)"></ng-tools-dynamic-component>
        </td>
        <td *ngIf="table?.options?.buttons  && isShowControl">
          <ng-container *ngFor="let btn of table?.options?.buttons; let btnIndex=index;">
            <span *ngIf="btn.isShow !== false" [ngClass]="btn.btnClass"
                  (click)="btnClicked($event, btnIndex, rowIndex)">
              <ng-container *ngIf="!btn?.text">
                {{ btn.text }}
              </ng-container>
              <span *ngIf="btn.iconClass" [ngClass]="btn.iconClass"></span>
            </span>
          </ng-container>
        </td>
      </tr>
    </ng-container>
    <tr>
      <td *ngIf="tableData?.page?.formattedResults?.length === 0" [attr.colspan]="table?.options?.headers?.length + 1">
        暂时没有数据
      </td>
    </tr>
    </tbody>
  </table>
  <ng-tools-pagination *ngIf="table?.options?.showPagination && tableData?.page?.totalPage > 1"
                       [pagination]="tableData"></ng-tools-pagination>
</div>
